<template>
    <div class="component-configTable" :class="{tableNoWrap}" ref="tabel_warp">
        <slot name="head" v-bind="paginationInfo"> </slot>
        <el-table
            ref="refTable"
            :header-cell-style="{
                background: 'rgba(233, 235, 239, 0.5000)',
                color: '#031129',
                borderBottom: '1px solid #E9EBEF',
            }"
            :cell-style="{
                borderBottom: '1px solid #E9EBEF',
            }"
            v-loading="loading"
            :stripe="false"
            v-bind="$attrs"
            :class="{ offScreenTable: offScreenEffect }"
            :rowKey="rowKey"
            :data="tableData"
            :border="border"
            :size="$attrs.size || 'small'"
            style="width: 100%"
            :height="$attrs.height"
            :max-height="$attrs.maxHeight"
            :highlight-current-row="$attrs.highlight || false"
            v-on="$listeners"
            @select-all="selectAll"
            @sort-change="sortChange"
            @filter-change="filterChange"
            @select="selectHandle"
            @selection-change="selectionChange"
            @current-change="currentChange"
            :show-summary='issummary'
            :summary-method="getSummaries"
        >
            <template
                v-if="showEmptyImg"
                slot="empty"
                class="flex-ju-al-center"
            >
                <img class="my-24" src="./noContent.svg" alt />
            </template>
            <template v-for="(cln, index) in finalTableColumn">
                <template v-if="cln.type == 'select'">
                    <el-table-column
                        :key="index"
                        type="selection"
                        :align="cln.align || 'center'"
                        :fixed="cln.type == 'select'&&!cln.fixed?'left':cln.fixed"
                        :width="cln.width || 36"
                        :selectable="cln.selectable"
                    ></el-table-column>
                </template>
                <template v-else-if="cln.type === 'radio'">
                    <el-table-column
                        :key="cln.id || cln.value || 'radio'"
                        :width="cln.width || 36"
                        :align="cln.align || 'center'"
                        :disabled="cln.disabled || null"
                        :enabled="cln.enabled || null"
                    >
                        <template slot-scope="scope">
                            <el-radio 
                                class="table_radio" 
                                v-model="radioSelect" 
                                :label="scope.row"
                                v-if="cln.disabled&&scope.row[cln.enabled] == cln.disabled" 
                                disabled
                                >
                                &nbsp;&nbsp;-
                            </el-radio>
                            <el-radio 
                                v-else 
                                class="table_radio" 
                                v-model="radioSelect" 
                                :label="scope.row"
                            >
                                &nbsp;&nbsp;-
                            </el-radio>
                        </template>
                    </el-table-column>
                </template>
                <template v-else-if="cln.type == 'index'">
                    <el-table-column
                        :key="index"
                        :label="'序号'"
                        type="index"
                        :prop="cln.value"
                        :align="cln.align || 'center'"
                        width="50"
                    ></el-table-column>
                </template>
                <template v-else-if="cln.type == 'operate'">
                    <el-table-column
                        :key="cln.id || ''"
                        fixed="right"
                        :label="cln.label"
                        :width="cln.width || autoWith(cln.buttons)"
                        :class-name="cln.className"
                         :align="cln.align || 'center'"
                    >
                        <!-- v-permission="permission(btn)" -->
                        <template slot-scope="scope">
                            <template v-for="btn in cln.buttons">
                                <el-button
                                    v-if="btnCondition(btn, scope)"
                                    :key="btn.click"
                                    size="small"
                                    :class="btn.className"
                                    type="text"
                                    @click="callBack(btn.click, scope.row)"
                                >
                                    {{ btn.label }}
                                </el-button>
                            </template>
                        </template>
                    </el-table-column>
                </template>
                <template v-else-if="cln.type === 'render' && cln.render">
                    <el-table-column
                        v-if="computedShowColumn(cln)"
                        :key="cln.id || cln.value || ''"
                        :column-key="'otable' + index + (cln.id || cln.value || '')"
                        :label="cln.label"
                        :prop="cln.value"
                        :sortable="cln.sortable"
                        :sort-method="cln.sortMethod"
                        :fixed="cln.fixed"
                        :width="cln.width"
                        :class-name="cln.className"
                        :align="cln.align || 'center'"
                    >
                        <template v-if="cln.headerRender" #header="scope">
                            <com-functionRender
                                :render="cln.headerRender"
                                :data="{
                                    row: scope.row,
                                    column: cln,
                                    index: scope.$index
                                }"
                            ></com-functionRender>
                        </template>
                        <template v-else-if="cln.header" #header="scope">
                            <slot v-bind="scope" :name="cln.header"></slot>
                        </template>
                        <template slot-scope="scope">
                            <com-functionRender
                                :render="cln.render"
                                :data="{
                                    row: scope.row,
                                    column: cln,
                                    index: scope.$index,
                                    scope: scope,
                                    list: tableData
                                }"
                            ></com-functionRender>
                        </template>
                    </el-table-column>
                </template>
                <template v-else>
                    <el-table-column
                        v-if="computedShowColumn(cln)"
                        v-bind="cln"
                        :key="'otable' + index + (cln.id || cln.value || '')"
                        :column-key="'otable' + index + (cln.id || cln.value || '')"
                        :prop="cln.value"
                        :label="cln.label"
                        :sortable="cln.sortable"
                        :sort-method="cln.sortMethod"
                        :type="cln.type === 'expand' ? 'expand' : ''"
                        :width="cln.width"
                        :align="cln.align || 'center'"
                        :class-name="cln.className"
                        :show-overflow-tooltip="tableNoWrap"
                    >
                        <template v-if="cln.header" #header="scope">
                            <slot v-bind="scope" :name="cln.header"></slot>
                        </template>
                        <template v-if="cln.slot" #default="scope">
                            <slot v-bind="scope" :name="cln.slot"></slot>
                        </template>
                        <template v-else-if="cln.slotRender" #default="scope">
                            <com-functionRender
                                :render="cln.slotRender"
                                :data="{
                                    row: scope.row,
                                    column: cln,
                                    index: scope.$index
                                }"
                            ></com-functionRender>
                        </template>
                    </el-table-column>
                </template>
            </template>
        </el-table>
        <!-- 加form表单disabled-false，保证在表单的列表不受表单的状态影响 -->
        <el-form :disabled="false">
            <com-pager
                v-if="pagination"
                :page-sizes="pageSizes"
              
                :page="pager"
                :total="total"
                @change="$comSelectChange"
            ></com-pager>
            <slot name="foot" v-bind="paginationInfo"> </slot>
        </el-form>
    </div>
</template>
<script src="./com-table.js"></script>
<style src="./com-table.scss" lang="scss" scoped></style>
